<template>
  <CollapseContainer title="基本设置" :canExpan="false">
    <a-row :gutter="24">
      <a-col :span="14">
        <a-form :model="user" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
          <a-form-item label="邮箱">
            <a-input v-model:value="user.email" />
          </a-form-item>
          <a-form-item label="手机号">
            <a-input v-model:value="user.mobile" />
          </a-form-item>
          <a-form-item label="个人简介">
            <a-input v-model:value="user.introduction" />
          </a-form-item>
          <a-form-item label="所在地">
            <a-input v-model:value="user.city" />
          </a-form-item>
        </a-form>
      </a-col>
      <a-col :span="10">
        <div class="change-avatar">
          <div class="mb-2">头像</div>
          <CropperAvatar
            :uploadApi="uploadUserAvatar"
            :value="avatar"
            btnText="更换头像"
            :btnProps="{ preIcon: 'ant-design:cloud-upload-outlined' }"
            @change="updateAvatar"
            width="150"
          />
        </div>
      </a-col>
    </a-row>
    <Button type="primary" @click="handleSubmit"> 更新基本信息 </Button>
  </CollapseContainer>
</template>
<script lang="ts">
export default {
  name: 'BaseSetting',
};
</script>
<script setup lang="ts">
import { Button, Row, Col } from 'ant-design-vue';
import { computed, ref, onMounted } from 'vue';
import { CollapseContainer } from '/@/components/Container';
import { CropperAvatar } from '/@/components/Cropper';

import { useMessage } from '/@/hooks/web/useMessage';
import headerImg from '/@/assets/images/header.jpg';
import { useUserStore } from '/@/store/modules/user';
import { uploadUserAvatar, userAvatarApi } from '/@/api/sys/upload';

import { message } from 'ant-design-vue';
import { updateBasicInfo } from '/@/api/sys/user';
const userStore = useUserStore();

onMounted(async () => {});

const userInfo = userStore.getUserInfo;

const avatar = computed(() => {
  const avatar = userStore.getUserInfo?.avatar;
  if (avatar) {
    return userAvatarApi + avatar;
  }
  return headerImg;
});

const user = ref({
  mobile: userInfo.mobile,
  email: userInfo.email,
  introduction: userInfo.introduction,
  city: userInfo.city,
});

function updateAvatar(src: string) {
  const userinfo = userStore.getUserInfo;
  userinfo.avatar = src;
  userStore.setUserInfo(userinfo);
}

const confirmLoading = ref<boolean>(false);
const handleSubmit = async () => {
  try {
    confirmLoading.value = true;
    const { mobile, email, introduction, city } = user.value;
    await updateBasicInfo({
      mobile: mobile,
      email: email,
      introduction: introduction,
      city: city,
    });
    message.success('保存成功');
    await userStore.getUserInfoAction();
  } finally {
    confirmLoading.value = false;
  }
};
</script>

<style lang="less" scoped>
.change-avatar {
  img {
    display: block;
    margin-bottom: 15px;
    border-radius: 50%;
  }
}
</style>
